
<template>
  <el-form-item
    :label="label"
    :prop="prop"
    :rules="rules"
    :label-width="labelWidth"
    class="form-item--number"
  >
    <el-input-number
      v-model="inputValue"
      :precision="precision"
      :step="step"
      :min="min"
      :max="max"
      :step-strictly="stepStrictly"
      :controls="controls"
      :class="alignClass"
      :disabled="disabled"
    />
    <slot name="append">
      <span
        v-if="append"
        class="form-input__append"
      >{{ append }}</span>
    </slot>
    <slot name="hint">
      <div
        v-if="hint"
        class="form-item__tips"
      >
        {{ hint }}
      </div>
    </slot>
  </el-form-item>
</template>

<script>
export default {
  name: 'NumberInput',
  props: {
    hint: {
      type: String,
      default: ''
    },
    rules: {
      type: [Object, Array],
      default: null
    },
    label: {
      type: String,
      default: ''
    },
    append: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    labelWidth: {
      type: [String, Number],
      default: ''
    },
    precision: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    },
    step: {
      type: Number,
      default: 1
    },
    stepStrictly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'left'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    controls: {
      type: Boolean,
      default: false
    },
    controlsPosition: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    alignClass() {
      return `text-${this.align}`
    }
  },
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.form-input {
  &__append:not(:empty) {
    margin-left: 10px;
  }
}
</style>
